<!--
 * @Descripttion: 统计数值组件演示
 * @version: 1.0
 * @Author: sakuya
 * @Date: 2021年6月23日10:28:17
 * @LastEditors:
 * @LastEditTime:
-->

<template>
	<el-main>
		<el-alert
			title="一个非常简单的组件, 目的就是省去重复写样式, 支持千分符/前后缀等."
			type="success"
			style="margin-bottom: 20px"
		></el-alert>
		<el-row :gutter="15">
			<el-col :lg="8">
				<el-card shadow="never">
					<sc-statistic
						title="Title"
						value="112893"
						description="Description"
						tips="Tips"
						groupSeparator
					></sc-statistic>
				</el-card>
			</el-col>
			<el-col :lg="8">
				<el-card shadow="never">
					<sc-statistic
						title="今日净利润"
						value="112893.00"
						prefix="¥"
						groupSeparator
					>
						<sc-trend v-model="trendValue1"></sc-trend>
					</sc-statistic>
				</el-card>
			</el-col>
			<el-col :lg="8">
				<el-card shadow="never">
					<sc-statistic
						title="留言"
						value="112893"
						suffix="条"
						groupSeparator
					>
						<sc-trend v-model="trendValue2"></sc-trend>
					</sc-statistic>
				</el-card>
			</el-col>
		</el-row>
	</el-main>
</template>

<script>
import scStatistic from "@/components/scStatistic/index.vue";

export default {
	name: "statistic",
	components: {
		scStatistic,
	},
	data() {
		return {
			trendValue1: 7.7,
			trendValue2: -18.9,
		};
	},
	mounted() {},
	methods: {},
};
</script>

<style scoped>
.el-card {
	margin-bottom: 15px;
}
.up {
	color: #f56c6c;
	margin-left: 5px;
}
.down {
	color: #67c23a;
	margin-left: 5px;
}
</style>
